<template>
	<view class="goods-wrapper">
		<view class="goods" v-for="item in goods" @click="goDetail(item.iid)">
			<image :src="showImg(item)" mode="widthFix"></image>
			<view class="goods-info">
				<view class="info-title">{{item.title}}</view>
				<text class="price">{{item.price}}</text>
				<image src="~@/static/common/shoucang.svg" mode="widthFix"></image>
				<text class="collect">{{item.cfav}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			goods:{
				type: Array,
				default: []
			}
		},
		computed:{
			//法一:
			showImg(){
				return function(item){
					 return  item.image || item.show.img
				}
			}
		},
		methods:{
			goDetail(iid){
				uni.$emit('postPrama',{iid})
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?id=' + iid,
					success() {
						console.log("success")
					},
					fail(){
						console.log('fail')
					}
				})
			},
			//法二：
			// showImg(item){
			// 	return  item.image || item.show.img 
			// }
		}
		
	}
</script>

<style lang="scss">
	.goods-wrapper{
		width: 750rpx;
		color: #666666;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.goods{	
			width: 47.5%;
			padding-bottom: 8rpx;
			image{
				width: 100%;
				border-radius: 5px;
			}
			.goods-info{
			  font-size: 12px;
			  bottom: 5px;
			  left: 0;
			  right: 0;
			  overflow: hidden;
			  text-align: center;
				.price{
					color: $high-color
				}
				.info-title{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 3px;
				}
				image{
					width: 14px;
					height: 14px;
					margin-left: 7px;
					padding-top: 3px;
				}
			}
		}
	}
</style>
